import React from "react";
import ReactDOM from 'react-dom';
import '../../main.scss';
import {designPage} from "plain-design-composition";
import {createCmsCarousel} from "../../components/CmsCarousel";
import {reactivityApi} from "../../packages/utils/vueReactivityApi";

const Test = designPage(() => {

  const { Carousel, CarouselItem } = createCmsCarousel(reactivityApi);

  return () => (
    <div>
      <Carousel childNum={3}>
        <CarouselItem style={{ height: '300px', backgroundColor: 'black' }}>
          Slide 1
        </CarouselItem>
        <CarouselItem style={{ height: '400px', backgroundColor: 'saddlebrown' }}>
          Slide 2
        </CarouselItem>
        <CarouselItem style={{ height: '500px', backgroundColor: 'dimgray' }}>
          Slide 3
        </CarouselItem>
      </Carousel>

      <button>BUTTON</button>
    </div>
  );
});

ReactDOM.render(<Test/>, document.querySelector('#app'));
